<meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" />
<!-- template with mvvm  -->
<style type="text/css">
    #wp_body #body_layout .item{float:left; position: relative;overflow: hidden;}
</style>
<div id="body_layout">
    <!--<div class="item" id="iwanto" style="background-color: #35bdd9"></div>
    <div class="item" id="smartsteam"></div>
    <div class="item" id="contacts" style="background-color: #87CB65"></div>
    <div class="item" id="apptools" style="background-color: #39bf71"></div>
    <div class="item" id="communities" style="background-color: #ECB244"></div>
    <div id="documents" class="item" style="background-color: #E6E6E6"></div>
    <div id="inbox" class="item" style="background-color: #006DA5"></div>
    <div class="item" id="calendar" style="background-color: #006A80">
        <img src="imgs/2.png" alt="">
    </div>
    <div id="boxes" class="item" style="background-color: #f2f2f2"></div>-->
</div>
<!-- view model -->
<!-- action or event -->
<script type="text/javascript">
WP_BODY = $('#wp_body');
var wp_main = $("#body_layout"), sps = $(".item"), header = $('#wp_header');
var iszoomout = false, maxwidth = 256, duration = 300, curstyle = '', dragable = true;

function render(){
    $('.item').each(function(i){
        $(this).css({height: Screen.bodyHeight});
    });
}

function homepage_resize(w,i){
    $('.item:eq('+i+')').css({width:w,height: Screen.bodyHeight});
}

$(function (){
    $('.item').each(function(i){
        $(this).css({width:256 ,height: Screen.bodyHeight});
    });
});

HomePage_Scrollable = (function() {
    var objs, obj, width, w, first, zoomtarget = -1, iszoom = false,debug = false;
    var zoomCallbaksArray = [];
    $.fx.speeds._default = 0;
    function log(s){
        if(debug) console.log(s);
    }
    function start(e) {
        if($(e.target).is('input')) return;
        obj = this;
        e = fix(e);
        obj.lastMouseX	= e.pageX;
        if (zoomtarget == -1) {
            document.onmousemove = drag;
            document.onmouseup = end;

            document.addEventListener('touchmove', drag);
            document.addEventListener('touchend', end);
        } else {
            document.onmousemove = null;
            document.onmouseup = null;
            document.removeEventListener('touchmove',drag);
            document.removeEventListener('touchend',end);
            obj = null;
        }
        return false;
    }
    function zoomIn(index) {
        log(' zoomIn index: '+ index);
        if(iszoom) {
            reset();
        }
        iszoom = true;
        zoomtarget = index;
        first[0] = objs[index];
        // first.width(3 * w);
        width += 2 * w;

        obj = objs[index];
        curstyle =  $(obj).attr('style');
        $(obj).transition({rotateY:'0deg'},0);
        $(obj).animate({width:3 * w },duration);
        _move(-1);
        var dx;
        if(Math.abs( parseInt(objs[index].style.left) ) > w * index){
            dx = -parseInt(objs[index].style.left) - w * index;
        } else {
            dx = ($(window).width() - 3 * w ) / 2 - (parseInt(objs[index].style.left) + w * index);
        }
        log('dx is : '+dx);
        _move(dx);
        obj = null;

        /*switch(zoomtarget){
            case 3:
                break;
        }*/
        wp_main.width((sps.width() + 0) * sps.length + maxwidth * 2);
        zoomCallbaksArray[index].ZoomInCallback();
    }
    function zoomOut(index) {
        log(' zoomOut index: '+ index);
        iszoom = false;
        zoomtarget = -1;
        first[0] = objs[index];
        // first.width(w);
        width -= 2 * w;
        obj = objs[index];
        $(obj).animate({width:w },duration,function(){
            $(obj).attr('style',curstyle);
        });
        _move(-1);
        _move(1);
        obj = null;
        switch(zoomtarget){
            case 3:
                $('#s3').find('.innerImg-middle, #blockmode, #listmode').hide();
                break;
        }
        wp_main.width((sps.width() + 0) * sps.length);
        zoomCallbaksArray[index].ZoomOutCallback();
    }
    function _move(dx) {
        log('call _move');
        if (dx != 0) {
            var nx, nxu, i, f, l, af, al;
            if (obj) {
                nx = parseInt(obj.style.left) + dx;
            } else {
                nx = dx;
            }
            log('nx is: ' + nx);
            //fix the nx
            if (dx > 0 && nx > 0) {
                nx = 0;
            } else if (dx < 0 && $(window).width() - nx > width) {
                nx = $(window).width() - width;
            }
            nxu = nx + 'px';
            f = Math.floor(Math.abs(nx) / w);
            l = Math.floor(($(window).width() - (w - (Math.abs(nx) % w))) / w) + 1 + f;
            log('l is : ' + l);
            if (zoomtarget >= 0)
                l -= 2;
            af = Math.acos(1 - (Math.abs(nx) % w) / w) * 180 / Math.PI;
            al = Math.acos((($(window).width() - (w - (Math.abs(nx) % w))) % w) / w) * 180 / Math.PI;
            if (dx > 0) {
                if (nx <= 0) {
                    log('nx <= 0');
                    for (i = 0; i < objs.length; i++) {
                        first[0] = objs[i];
                        if (i == f) {
                            first.css('transformOrigin', '100% 50% 0px');
                            first.transition({rotateY:'-' + af + 'deg'});
                        } else if (i == l) {
                            first.css('transformOrigin', '0% 50% 0px');
                            first.transition({rotateY:al + 'deg'});
                        } else if (i > f && i < l) {
                            first.transition({rotateY: '0deg'});
                        }else {
                            first.transition({rotateY: '90deg'});
                        }
                        if(dragable)
                            objs[i].style.left = nxu;
                    }
                }
            } else if (dx < 0) {
                if ($(window).width() - nx <= width) {
                    log('$(window).width() - nx <= width');
                    for (i = 0; i < objs.length; i++) {
                        log(' ------ '+i+' ------ ');
                        first[0] = objs[i];
                        if (i == f && dragable) {
                            log('i == f');
                            first.css('transformOrigin', '100% 50% 0px');
                            first.transition({rotateY:'-' + af + 'deg'});
                        } else if (i == l) {
                            log('i == l');
                            first.css('transformOrigin', '0% 50% 0px');
                            first.transition({rotateY:al + 'deg'});
                        } else if (i < f && dragable) {
                            log('i < f');
                            first.css('transformOrigin', '100% 50% 0px');
                            first.transition({rotateY:'-90deg'});
                        } else if (i < l) {
                            log('i < l');
                            first.css('transformOrigin', '0% 50% 0px');
                            first.transition({rotateY:'0deg'});
                        } else {
                            log(' else ');
                            first.transition({rotateY: '-90deg'});
                        }
                        if(dragable)
                            objs[i].style.left = nxu;
                    }
                } else{

                }
            }
        }
    }
    function reset(){
        width -= 2 * w;
        obj = objs[zoomtarget];
        zoomCallbaksArray[zoomtarget].ZoomOutCallback();
        $(obj).width(w).attr('style',curstyle);
        $(obj).css({height: Screen.bodyHeight});
        zoomtarget = -1;
        _move(-1);
        _move(1);
        iszoom = false;
    }
    function drag(e) {
        if(!dragable) return;
        e = fix(e);
        var ex = e.pageX, dx, nx, nxu, i, f, l, af, al;
        dx = ex - obj.lastMouseX;
        if (dx > 5 || dx < -5) {
//        if (dx != 0) {
            if(iszoom) {
                reset();
            }
            nx = parseInt(obj.style.left) + dx;
            //fix the nx
            if (dx > 0 && nx > 0) {
                nx = 0;
            } else if (dx < 0 && $(window).width() - nx > width) {
                nx = $(window).width() - width;
            }
            nxu = nx + 'px';
            f = Math.floor(Math.abs(nx) / w);
            l = Math.floor(($(window).width() - (w - (Math.abs(nx) % w))) / w) + 1 + f;
            af = Math.acos(1 - (Math.abs(nx) % w) / w) * 180 / Math.PI;
            al = Math.acos((($(window).width() - (w - (Math.abs(nx) % w))) % w) / w) * 180 / Math.PI;
            if (dx > 0) {
                if (true) {//nx <= 0) {
                    for (i = 0; i < objs.length; i++) {
                        first[0] = objs[i];
                        if (i == f) {
                            first.css('transformOrigin', '100% 50% 0px');
                            first.transition({rotateY:'-' + af + 'deg'});
                        } else if (i == l) {
                            first.css('transformOrigin', '0% 50% 0px');
                            first.transition({rotateY:al + 'deg'});
                        } else if (i > f && i < l) {
                            first.transition({rotateY: '0deg'});
                        } else {
                            first.transition({rotateY: '90deg'});
                        }
                        objs[i].style.left = nxu;
                    }
                }
            } else if (dx < 0) {
                if (true) {//$(window).width() - nx <= width) {
                    for (i = 0; i < objs.length; i++) {
                        first[0] = objs[i];
                        if (i == f) {
                            first.css('transformOrigin', '100% 50% 0px');
                            first.transition({rotateY:'-' + af + 'deg'});
                        } else if (i == l) {
                            first.css('transformOrigin', '0% 50% 0px');
                            first.transition({rotateY:al + 'deg'});
                        } else if (i < f) {
                            first.css('transformOrigin', '100% 50% 0px');
                            first.transition({rotateY:'-90deg'});
                        } else if (i < l) {
                            first.css('transformOrigin', '0% 50% 0px');
                            first.transition({rotateY:'0deg'});
                        } else {
                            first.transition({rotateY: '90deg'});
                        }
                        objs[i].style.left = nxu;
                    }
                }
            }
            obj.lastMouseX = ex;
        }
        return false;
    }
    function end() {
        document.onmousemove = null;
        document.onmouseup   = null;
        obj = null;
    }
    function fix(e) {
        e = e || window.event;
        e.which = e.which || e.button;
        e.pageX = e.pageX || e.x;
        return e;
    }
    return {
        reset:function(){
            sps = $('.item');
            wp_main.width((sps.width() + 0) * sps.length);
            dragable = Screen.width > (sps.length * maxwidth + maxwidth * 2) ? false : true;
        },
        scroll: function(selector, container) {
            objs = $(selector, container);
            width = container.width();
            w = objs.width();
            first = $(selector + ':first', container);

            var m = Math.floor(($(window).width() / w)),
                    a = Math.acos(($(window).width() % w) / w) * 180 / Math.PI;
            objs.css('perspective', '4000px');
            first[0] = objs[m];
            first.css('transformOrigin', '0% 50% 0px');
            first.transition({rotateY:a + 'deg'});
            for (var i = 0; i < objs.length; i++) {
                objs[i].onmousedown = start;
                objs[i].addEventListener('touchstart', start);
                if (isNaN(parseInt(objs[i].style.left)))
                    objs[i].style.left = "0px";
                if (i > m) {
                    first[0] = objs[i];
                    first.css('transformOrigin', '0% 50% 0px');
                    first.transition({rotateY:'90deg'});
                }
            }
        },
        zoom: function(index) {
            if (zoomtarget == index) {
                zoomOut(index);
            } else {
                zoomIn(index);
            }
        },
        zoomIn:function(index){
            zoomIn(index);
        },
        zoomOut:function(index){
            zoomOut(index);
        },
        registerZoomCallback: function (index, zoominCB, zoomoutCB) {
            var newElement = {
                ZoomInCallback : zoominCB,
                ZoomOutCallback : zoomoutCB
            };
            zoomCallbaksArray[index] = newElement;
        },
        moveToPosition: function(dx) {
            if (zoomtarget != -1) {
                reset();
            }
            _move(-dx);
        }
    };
})();

window.onresize = function(){
    Screen.width =  $(window).width();
    Screen.height = $(window).height();
    Screen.bodyHeight = Screen.height-60;
    wp_main.height(Screen.bodyHeight);
    WP_BODY.width(Screen.width);
    render();
    //notification win reset position
    if (WP_USER_ID != 1) {
        if (window.notificationWinFunc) {
            notificationWinFunc.setPosition();
        }
    }
    dragable = Screen.width > (sps.length * maxwidth) ? false : true;
};

$(window).resize();
</script>